<template>
  <div
    class="search-result-box"
    :style="{
      background: skinInfo.backImg
        ? 'url(' + skinInfo.backImg + ')'
        : skinInfo.backColor
        ? skinInfo.backColor
        : '#FFFFFF',
    }"
  >
    <searchBar @searchthis="handelSearch" />
    <GreatVideCom
      :class="isIos ? 'great-video-box-ios' : ''"
      :boxTopIsShown="false"
      :VideoListArray="videoItem"
    />

    <!-- <ZxyhHeader
      v-if="$channel == 'zxyh'"
      :title="''"
      :isClose="false"
      :isSearch="true"
      @formChildMsg="searchTrue"
    ></ZxyhHeader> -->

    <!-- <header ref="header">
      <div class="search-wrap">
        <form @submit.prevent action="#">
          <input
            type="search"
            placeholder="请输入搜索关键字"
            v-model="searchKeyword"
            @keyup.13="handelSearch"
            ref="inputSearch"
          />
        </form>
        <Iconfont iconClass="sousuo " />
        <div class="cancel" @click="cancel">取消</div>
      </div>
    </header> -->

    <!-- <div class="connect-box">
      <div class="no-video" v-if="isNoVideo"></div>
      <ul>
        <li
          v-for="(v, index) in conData"
          :key="index"
          :style="{
            background:
              skinInfo.backImg || skinInfo.backColor
                ? 'rgba(255, 255, 255, 0.4)'
                : '#FFFFFF',
          }"
          @click="linkLookBackPage(v)"
        >
          <div class="img-box">
            <img
              :src="v.bgimg + '?x-oss-process=image/resize,m_fixed,h_171,w_300'"
              alt
            />
          </div>
          <div class="text-box">
            <p class="title-box">{{ v.title }}</p>
            <p>{{ v.pvSum || 0 }}观看</p>
          </div>
        </li>
      </ul>
    </div> -->
  </div>
</template>
<script>
import GreatVideCom from "@/zxyhPages/newHomeCom/greatVideoCom.vue";
import searchBar from "../newHomeCom/searchBar.vue";
import ZxyhHeader from "@/components/zxyh/zxyhHeader";
export default {
  components: {
    searchBar,
    ZxyhHeader,
    GreatVideCom,
  },
  props: {},
  data() {
    return {
      wherePage: "", //来自哪个页面
      nowPageNum: 1,
      conData: [],
      isNoVideo: false,
      page: 1,
      searchKeyword: "",
      videoItem: [],
      searchValue:''
    };
  },
  created() {
    this.$store.dispatch("hideNav");
    this.searchValue = this.$route.query.content;
    // this.getVideoArray(this.page, this.$route.query.typeId, this.searchKeyword);
    this.getAllData(this.type, this.searchValue);

       this.wherePage = this.$route.query.page;
  },
  mounted() {
    this.$EventBus.$emit("showSearchBar", true);
  },
  computed: {
    skinInfo() {
      return this.$store.state.skinStoreInfo;
    },
  },
  methods: {
    //开始搜索
    handelSearch(x) {
      console.log("handleSearch---------"+x);
      this.videoItem = [];
      this.getAllData(this.type, x);
    },

    //初始化数据
    getAllData(type, content) {
      if (this.wherePage == "eduPage") {
        //乐知教育页面
        this.$http
          .get("/h5live/getTspdVideos", {
            params: {
              page: this.nowPageNum,
              pageSize: 10,
              typeId: this.$route.query.id,
              gradeId: "",
              cityId: "",
              tagsId: "",
              title: content,
            },
          })
          .then((res) => {
            if (res.data.code == "000000") {
              if (res.data.data && res.data.data.length > 0) {
                this.videoItem = this.videoItem.concat(res.data.data);
              } else {
                this.totalPage = false;
                // console.log(this.scrollToY);
                if (this.$refs.scroll) {
                  this.$refs.scroll.forceUpdate();
                }
              }
            }
          })
          .catch((response) => {
            this.isSearchNone = true;
            console.log(response);
          });
      } else {
        //精彩视频页面
        this.$http
          .get("/h5live/getHomeVideo", {
            params: {
              p: this.nowPageNum,
              type,
              content,
            },
          })
          .then(
            (res) => {
              if (res.data.code == "000000") {
                if (res.data.data && res.data.data.length > 0) {
                  this.videoItem = this.videoItem.concat(res.data.data);
                } else {
                  this.totalPage = false;
                  // console.log(this.scrollToY);
                  if (this.$refs.scroll) {
                    this.$refs.scroll.forceUpdate();
                  }
                }
              } else {
                console.log(err);
              }
            },
            (err) => {
              console.log(err);
            }
          );
      }
    },

    linkLookBackPage(v) {
      this.$router.push(`/${this.$channel}/liveBack/${v.vid}?dzhPage=true`);
    },

    getVideoArray(page, typeId, title) {
      //视频列表  page 页码    pageSize 一页的个数   typeId 专辑的id  gradeId 年纪的id   cityId城市的id   tagsId标签的id
      this.$http
        .get(
          "/h5live/getTspdVideos?page=" +
            page +
            "&pageSize=10" +
            "&typeId=" +
            typeId +
            "&gradeId=&cityId=&tagsId=" +
            "&title=" +
            title
        )
        .then((res) => {
          if (res.data.code == "000000") {
            //console.log(res.data.data)
            if (res.data.data.length) {
              this.conData = [...this.conData, ...res.data.data];
              this.isNoVideo = false;
            } else {
              console.log("数组为空暂无数据");
              this.isNoVideo = true;
            }
          }
        })
        .catch((response) => {
          console.log(response);
        });
    },
    cancel() {
      this.$router.go(-1);
    },
    filtNum(num) {
      if (!num) {
        num = 0;
      } else if (num > 10000) {
        num = `${(num / 10000).toFixed(1)}万`;
      }
      return num;
    },
  },
};
</script>

<style scoped="scoped">
.great-video-box {
  margin-top: 168px;
}
.search-result-box {
  width: 100vw;
  height: 100vh;
  background-size: 100% 100% !important;
}
.connect-box {
  width: 100vw;
  height: calc(100vh - 80px);
  background: white;
  margin-top: 5px;
  overflow-y: scroll;
}
header {
  position: relative;
  background: white;
  top: 0;
  left: 0;
  /*background: pink;*/
}

.search-wrap {
  height: 80px;
  display: flex;
  padding-left: 20px;
  align-items: center;
  opacity: 1;
  /* margin-top: 15px;*/
}

.search-wrap.searchShow {
  opacity: 1;
}

.search-wrap i {
  position: absolute;
  left: 50px;
  font-size: 30px;
  color: #666;
  top: 26px;
}

.search-wrap input {
  width: 620px;
  height: 60px;
  background: rgba(246, 246, 246, 1);
  border-radius: 30px;
  background: #f6f6f6;
  box-sizing: border-box;
  padding-left: 80px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

input::placeholder {
  padding: 0;
}

.search-wrap .cancel {
  margin-left: 30px;
  font-size: 28px;
  color: #333;
}

::-webkit-scrollbar {
  height: 0;
  width: 0;
  color: transparent;
  display: none;
}

.connect-box ul {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.connect-box ul li {
  width: 100%;
  display: flex;
  /* padding: 20px 15px; */
  margin-bottom: 20px;
  border-radius: 24px;
}
.img-box {
  width: 382px;
  height: 214px;
  margin-right: 20px;
}
.img-box img {
  width: 100%;
  height: 100%;
  border-radius: 24px;
}
.text-box {
  flex: 1;
}
.text-box .title-box {
  width: 100%;
  height: 140px;
  padding-top: 20px;
  margin-bottom: 20px;
  padding-right: 10px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 28px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  line-height: 42px;
}
.text-box p {
  font-size: 24px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}
.text-box p i {
  display: inline-block;
  height: 32px;
  width: 32px;
  margin-right: 8px;
  background: url("../../assets/images/zxyh/scan.png") no-repeat;
  background-size: 100% 100%;
  vertical-align: bottom;
}
.no-video {
  width: 100%;
  height: 470px;
  background: url(../../assets/images/no-video.png) no-repeat center center;
  /* background-size: 750px 470px; */
  position: absolute;
  top: 350px;
  left: 0;
}
.header-conatiner ~ .connect-box {
  height: calc(100vh - 168px);
}
.header-conatiner-zxyhIos ~ .connect-box {
  height: calc(100vh - 228px);
}
.search-result-box header,
.search-result-box >>> .header-empty,
.search-result-box >>> .header-box,
.connect-box {
  background: none;
}
</style>